<template>
  <div>
    <template v-for="(menu,index) in this.menuData">
      <el-submenu :key="menu.id" class="pad" :index="menu.id+''" v-if="menu.next_level_data">
          <template slot="title">
              <span slot="title">{{menu.branch_name}}</span>
          </template>
          <MenuTree :menuData="menu.next_level_data"></MenuTree>
      </el-submenu>
      <el-menu-item :key="index"  :index="menu.id+''" v-else>
          <span slot="title">{{menu.branch_name}}</span>
      </el-menu-item>
    </template>
  </div>
</template>
  
<script>
import MenuTree from '@/page/companymanagement/components/menuTree'

export default {
  props: ['menuData'],
  name: 'MenuTree',
  components:{
      MenuTree
  }
}
</script>
<style>
.pad{
  padding-left: 20px;
}
</style>